<template>
  <div class="container">
    <div class="app-container">
      <!-- <el-tree :data="arr" :props="{label:'name',children:'son'}" default-expand-all show-checkbox>
        <template #default="scope">
          <el-row type="flex" justify="space-between" style="width:100%">
            <el-col :span="3">
              {{ scope.node.label }}
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="mini">添加</el-button>
            </el-col>
          </el-row>
        </template>
      </el-tree> -->
      <el-tree :data="departmentList" :props="{label:'name'}" default-expand-all :expand-on-click-node="false">
        <template #default="{node,data}">
          <el-row type="flex" justify="space-between" style="width:100%;">
            <el-col :span="3">{{ node.label }}</el-col>
            <el-col :span="3" style="text-align:right;margin-right:30px">
              <span>{{ data.managerName }}</span>
              <el-dropdown style="margin-left:15px" @command="handleCommand($event,data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="del(data.id)">删除</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>

            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 提示框 -->
    <AddForm v-if="showDialog" :is-edit="isEdit" :visible.sync="showDialog" :pid="pid" @updateDept="getDepartments" />
  </div>
</template>
<script>
import { getDepartments, delDepartments } from '@/api/department'
import { transListToTree } from '@/utils'
// import { del } from 'vue'
import AddForm from './components/add-dept.vue'
export default {
  name: 'Department',
  components: {
    AddForm
  },
  data() {
    return {
      // arr: [
      //   { name: '家电', son: [
      //     { name: '电视机', son: [
      //       { name: '小米电视' },
      //       { name: '熊猫电视' }
      //     ] }
      //   ] },
      //   { name: '家具' }
      // ]
      departmentList: [],
      pid: null,
      isEdit: false,
      showDialog: false

    }
  },
  async created() {
    await this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const res = await getDepartments()
      this.departmentList = transListToTree(res, 0)
      console.log(this.departmentList)
    },
    async handleCommand(type, id) {
      this.pid = id
      if (type === 'add') {
        console.log('添加逻辑')
        this.isEdit = false
        this.showDialog = true
      } else if (type === 'edit') {
        console.log('编辑')
        this.isEdit = true
        this.showDialog = true
      } else {
        // const res=await delDepartments()
        // console.log(res)
        try {
          await this.$confirm('确定要删除吗')
          console.log('删除')
          await delDepartments(id)
          this.$message.success('删除成功')
          this.getDepartments()
        } catch (e) {
          console.log(e)
        }
      }
    }

  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

</style>
